<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>

  *{
   margin:0;
   padding:0
  }

  </style>
</head>

<body>
  <div id ="box"> box </div>
  <span class="span"> span1</span>
  <span class="span"> span2</span>
  <span class="span"> span3</span>
  <span class="span"> span4</span>
  <p>我是p标签</p>
</body>

  <script>
    //怎么去 获取dom对象
    //两个特殊的dom对象
    // document.body  获取body标签
    // document.documentElement  获取根标签
    //三种 获取dom对象的方法
    // document.getElementById()
    // document.getElementsByClassName()
    // document.getElementsByTagName()
    var box = document.getElementById('box');//通过id 去获取页面元素
    console.log(box);
    console.dir(box);
    var span = document.getElementsByClassName('span');//通过class 获取一个类数组形式  有长度 索引,可以for循环,无数组方法(push pop....); 
    console.log(span);
    // span.push('0');  报错  span.push is not a function
    for(var i=0;i<span.length;i++){
      console.log(span[i]);
    }
    // span.forEach(function(item,index){//报错   span.forEach is not a function
    //   console.log(item);
    // });

    //获取span1,通过下标 选中元素(易错点)
    // document.getElementsByClassName('span')[0] 
    
    var p = document.getElementsByTagName('p');//标签名 和class 页面内不唯一  得到的是类数组.有长度 索引,可以for循环,无数组方法(push pop....); 
    console.log(span);
    console.log(p);

 </script>
</html>